<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="button-group">
        <span>只看开机 </span
        ><el-switch
          v-model="filter"
          active-color="#00f4ff"
          inactive-color="#bbb"
        />
        <button
          :class="[
            'system-button',
            system === 'hcda' ? 'system-button-selected' : '',
          ]"
          type="primary"
          @click="setSystem('hcda')"
        >
          HCDA
        </button>
        <button
          :class="[
            'system-button',
            system === 'lcda' ? 'system-button-selected' : '',
          ]"
          type="primary"
          @click="setSystem('lcda')"
        >
          LCDA
        </button>
      </div>
      <div class="elec-trend">
        <div class="elec-trend-title">空压机设备实时状态（开/关）</div>
        <div class="elec-trend-title">历史BOV关度散点图（%）</div>
        <div class="elec-trend-title">历史CDA转化率（m³/kWh）</div>
        <div class="elec-trend-title">CDA转化率曲线（m³/kWh）</div>
      </div>
      <div>
      </div>
      <div class="view-frame">
        <EnergyCard
          v-for="(item, index) in dataList"
          :key="index"
          :current-data="
            currentData
              ? currentData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :week-time="
            weekTime
              ? weekTime.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :bov-data="
            bovData ? bovData.find((e) => e.machine_id === item.machine_id) : {}
          "
          :convert-rate-data="
            convertRateData
              ? convertRateData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :load-rate-data="
            loadRateData
              ? loadRateData.find((e) => e.machine_id === item.machine_id)
              : {}
          "
          :best-machine="bestMachine"
          @popup="popup"
        />
      </div>
    </div>
    <PopupWindow
      v-show="showData"
      :title="systemMap[system] + '同类型设备转化率对比'"
      :data-name="'转化率'"
      :pop-data="popData"
      @hide="hide"
    />
  </div>
</template>

<script>
import redisService from "@service/redisRequest.js";
import { mapState } from "vuex";
import "element-ui/lib/theme-chalk/index.css";
const cdaService = {
  hcda: {
    getMachineInfo: "getHCDAMachineInfo",
    getCDACurrentData: "getHCDACurrentData",
    getCDAComputedData: "getHCDAComputedData",
    getCDALast7daysData: "getHCDALast7daysData",
    getCDAConvertData: "getHCDAConvertData",
    getCDALine: "getHCDALine",
  },
  lcda: {
    getMachineInfo: "getLCDAMachineInfo",
    getCDACurrentData: "getLCDACurrentData",
    getCDAComputedData: "getLCDAComputedData",
    getCDALast7daysData: "getLCDALast7daysData",
    getCDAConvertData: "getLCDAConvertData",
    getCDALine: "getLCDALine",
  },
};
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    EnergyCard: () => import("./module/EnergyCard.vue"),
    PopupWindow: () => import("@/components/PopupWindow.vue"),
    // vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      systemMap: {
        hcda: "HCDA",
        lcda: "LCDA",
        low_chiller: "低温冰机",
        medium_chiller: "中温冰机",
      },
      showData: false,
      runFlag: 0,
      system: "lcda",
      filter: false,
      machineList: [],
      currentData: [],
      weekTime: [],
      bovData: [],
      convertRateData: [],
      loadRateData: [],
      combineList: [],
      bestMachine: "",
      redisService,
      cdaService,
      popData: {},
    };
  },
  computed: {
    mainTitle() {
      return this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    dataList() {
      if (!this.filter) {
        return this.machineList;
      } else {
        if (this.currentData.length) {
          return this.currentData.filter(
            (e) => e.value.find((i) => i.tag_id === "s").value === -1
          );
        } else {
          return [];
        }
      }
    },
  },
  created() {
    this.initCDA();
    setTimeout(() => {
      this.runFlag = 0;
    }, 10000);
  },
  methods: {
    setSystem(system) {
      this.system = system;
      this.initCDA();
    },
    popup(data) {
      this.popData = data;
      this.showData = true;
    },
    hide() {
      this.showData = false;
    },
    async initCDA() {
      this.getMachineInfo();
      this.getCDACurrentData();
      this.getCDAComputedData();
      this.getCDALast7daysData();
      this.getCDAConvertData();
      this.getCDALine();
    },
    async getMachineInfo() {
      try {
        this.runFlag = 1;
        const result = await this.service[
          this.cdaService[this.system].getMachineInfo
        ]();
        if (!result || !result.data) {
          this.$notify({
            title: "设备信息获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.machineList = result.data;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "当前状态数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async getCDACurrentData() {
      try {
        this.runFlag = 1;
        const result1 = await this.service[
          this.cdaService[this.system].getCDACurrentData
        ]();
        if (!result1 || !result1.data) {
          this.$notify({
            title: "当前状态数据获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.currentData = result1.data;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "当前状态数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async getCDAComputedData() {
      // async getHCDAComputedData() {
      try {
        this.runFlag = 1;
        const result2 = await this.service[
          this.cdaService[this.system].getCDAComputedData
        ]();
        // const result2 = await this.service.getHCDAComputedData()
        if (!result2 || !result2.data) {
          this.$notify({
            title: "周运行时间获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.weekTime = result2.data[0].data;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "周运行时间获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async getCDALast7daysData() {
      try {
        this.runFlag = 1;
        const result3 = await this.service[
          this.cdaService[this.system].getCDALast7daysData
        ]();
        // console.log(result3.data,'BOV')
        if (!result3 || !result3.data) {
          this.$notify({
            title: "bov数据获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.bovData = result3.data;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "bov数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    //历史cda转化率
    async getCDAConvertData() {
      try {
        this.runFlag = 1;
        const result4 = await this.service[
          this.cdaService[this.system].getCDAConvertData
        ]();
        console.log("历史cda转化率",result4)
        if (!result4 || !result4.data) {
          this.$notify({
            title: "转化率数据获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.convertRateData = result4.data;
        const bestMachine = this.convertRateData.map((e) => {
          return e.convert_rate[e.convert_rate.length - 1];
        });
        if (Math.max(...bestMachine) > 0) {
          const ind = bestMachine.indexOf(Math.max(...bestMachine));
          const id = this.convertRateData[ind];
          this.bestMachine = id.machine_name;
        }
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "转化率数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
    async getCDALine() {
      try {
        this.runFlag = 1;
        const result5 = await this.service[
          this.cdaService[this.system].getCDALine
        ]();
        if (!result5 || !result5.data) {
          this.$notify({
            title: "负载率数据获取失败",
            type: "error",
            duration: 2500,
          });
          this.runFlag = 0;
          return;
        }
        this.loadRateData = result5.data;
        this.runFlag = 0;
      } catch (e) {
        this.$notify({
          title: "负载率数据获取失败",
          type: "error",
          duration: 2500,
        });
        this.runFlag = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.container {
  position: relative;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  height: 78%;
  justify-content: flex-start;
  overflow-y: scroll;
  // margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.button-group {
  position: absolute;
  top: 3%;
  right: 0;
  span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 1.2rem;
    margin: 0 0.3rem;
  }
  .system-button {
    width: 7rem;
    height: 3.2rem;
    line-height: 3rem;
    color: white;
    align-self: center;
    background-color: transparent;
    border: 1.5px solid rgba(185, 183, 183, 0.5);
    border-radius: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 2rem;
  }
}
.system-button-selected {
  background-color: #00f4ff !important;
  color: #122a7a !important;
}
.elec-trend {
  display: flex;
  height: 3rem;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  flex-basis: 25%;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
}
</style>
